<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: html}">
<head>
    <title>发布诗词 - 诗词平台</title>
</head>
<body>
<div th:fragment="content">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title mb-4">发布诗词</h3>
                    <form th:action="@{/api/poems}" method="post" id="poemForm">
                        <div class="mb-3">
                            <label for="title" class="form-label">标题</label>
                            <input type="text" class="form-control" id="title" name="title" required>
                        </div>
                        <div class="mb-3">
                            <label for="category" class="form-label">分类</label>
                            <select class="form-select" id="category" name="categoryId" required>
                                <option value="">请选择分类</option>
                                <option th:each="category : ${categories}"
                                        th:value="${category.id}"
                                        th:text="${category.name}">
                                </option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="content" class="form-label">内容</label>
                            <textarea class="form-control" id="content" name="content"
                                      rows="10" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="tags" class="form-label">标签</label>
                            <input type="text" class="form-control" id="tags" name="tags"
                                   placeholder="用逗号分隔多个标签">
                        </div>
                        <button type="submit" class="btn btn-primary">发布</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    document.getElementById('poemForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const tags = formData.get('tags').split(',')
            .map(tag => tag.trim())
            .filter(tag => tag.length > 0);

        const data = {
            title: formData.get('title'),
            content: formData.get('content'),
            categoryId: formData.get('categoryId'),
            tags: tags
        };

        fetch('/api/poems', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => {
                if (response.ok) {
                    window.location.href = '/poems';
                }
            });
    });
</script>
</body>
</html> 